<template>
  <div class="choose-fileslist">
    <el-dialog custom-class="wlm-form-dialog dialog-table choose-files" width="55%" :append-to-body="true" :visible.sync="dialogTableVisible" @close="clearData" @open="dialogGetData">
      <div class="wlm-dialog-fixheader">
        <span class="wlm-dialog-inlenr">图文选择器</span>
      </div>
      <!-- <el-scrollbar> -->
      <div class="wlm-table-content">
        <div class="wlm-dialog-main">
          <div class="flex-row">
            <el-scrollbar>
              <div class="goods-menu">
                <div class="goods-menu-item" :class="{'is-active':type === item.group_id}" v-for="(item, index) in menuData" :key="index" @click="handleNodeClick(item)">
                  <span class="ellipsis" style="width: 124px;line-height: 1;">{{item.group_name}}</span>
                </div>
              </div>
            </el-scrollbar>
            <div v-if="name == '图文链接'" style="width:100%;">
              <el-table ref="multipleTable" :data="tableDatas" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column label="名称">
                  <template slot-scope="scope">{{ scope.row.title }}</template>
                </el-table-column>
                <el-table-column prop="name" label="创建时间">
                  <template slot-scope="scope">{{ scope.row.create_time }}</template>
                </el-table-column>
              </el-table>
            </div>
            <div class="goods-list-group dis-flex flex-row flex-warp" v-else-if="name == '小程序卡片'" style="width:100%;max-height: 460px;overflow-x:hidden;">
               <el-table  :data="cardData" @selection-change="handleSelectionChange" style="width: 100%">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="date" label="卡片名称">
                    <template slot-scope="scope">
                        <span>{{scope.row.title}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="text" label="文本"></el-table-column>
                <el-table-column prop="appid" label="appId"></el-table-column>
                <el-table-column prop="url" label="小程序链接"></el-table-column>
            </el-table>
            </div>
            <div class="goods-list-box" v-else>
              <div class="flex-row flex-justify-b" style="margin-bottom:10px;">
                <div class="flex-row flex-justify-b flex-align-c" style="padding-right:20px;width:100%;margin-bottom: 10px;">
                  <!-- <el-input size="small" v-model="tableFormatData.userTable.files.file_name" placeholder="标题/作者/摘要" style="width:160px;">
                    <el-button @click="filesSerch" slot="append" icon="el-icon-search"></el-button>
                  </el-input> -->
                  <el-button @click="$router.push({path:'/channel/weChatPublicUeditorSourceAdd'})" type="primary" size="small" style="margin-right:10px;">新建图文</el-button>
                </div>
              </div>

              <div>
                <el-scrollbar style="width:100%;max-height: 460px;overflow-x:hidden;height: 460px;">
                  <div class="goods-list-group flex-row flex-warp" style="padding-top: 10px;padding-right: 12px;height: 100%;">
                    <div class="goods-list col-3" v-for="(item, index) in tableFormatData.userTable.tableData" :key="index">
                      <div class="goods-item flex-col flex-align-c" @click="chooseFile(item.id, item)">
                        <i class="el-icon-circle-close   rate" style="right: -8px;" @click.stop="delFile(item.id, item)"></i>
                        <div class="source-content">
                          <div class="file-box">
                            <div class="file-item">
                              <div class="file-title flex-row flex-align-c flex-justify-b">
                                <span class="ellipsis scale-grow">{{item.filename}}</span>
                                <div>
                                  <i v-if="item.model == 'local'" class="el-icon-location-outline" style="font-size:20px;color:#409EFF;"></i>
                                  <svg-icon v-if="item.model == 'perm'" icon-class="wechat" style="font-size:20px;fill:#4dbe2e;" />
                                </div>
                              </div>
                              <div class="file-content">
                                <div class="file-source">
                                  <div class="news-list">
                                    <div class="first-news" v-for="(newsItem, newsIndex) in item.items" v-if="newsIndex == 0" :key="newsIndex">
                                      <img :src="`${newsItem.thumb_url ? newsItem.thumb_url : getPath('default_picture.png')}`">
                                      <p class="news-title">{{newsItem.title}}</p>
                                      <div class="bg"></div>
                                    </div>
                                    <div class="news clearfix" v-for="(newsItem, newsIndex) in item.items" v-if="newsIndex > 0" :key="newsIndex">
                                      <img :src="`${newsItem.thumb_url ? newsItem.thumb_url : getPath('default_picture.png')}`">
                                      <p class="news-title">{{newsItem.title}}</p>
                                    </div>
                                  </div>
                                </div>
                              </div>
                              <div class="file-footer flex-row">
                                <div class="edit-btn pointer"><i class="el-icon-edit"></i></div>
                                <div class="del-btn pointer" @click.stop="delTableItem(item.id)"><i class="el-icon-delete"></i></div>
                              </div>
                            </div>
                          </div>
                          <div class="mask" style="overflow: hidden;" v-if="currentRow.includes(item.id)">
                            <i class="el-icon-check center-icon pos-center"></i>
                            <p class="triangle"><i class="el-icon-check"></i></p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </el-scrollbar>
              </div>

            </div>
          </div>

        </div>
      </div>
      <!-- </el-scrollbar> -->
      <span v-if="name=='微信图文'" class="orders-gray" style="display:inline-block;margin-left:210px;margin-top:50px;">已选择{{currentRow.length}}</span>
      <div v-if="name=='微信图文'" class="pagination-content flex-row flex-justify-b" style="margin-top:20px;">
        <el-row class="pagination-btns" style="margin-left:200px;position: relative"></el-row>
        <el-pagination style="margin-top:0;margin-bottom:20px;margin-right: 25px;" :disabled="!hasTableData" @size-change="listPageChange" @current-change="listPageChange" :current-page.sync="tableFormatData.userTable.pagination.page" :page-sizes="tableFormatData.userTable.pagination.pagesizes" :page-size.sync="tableFormatData.userTable.pagination.list_rows" layout="total, sizes, prev, pager, next, jumper" :total="hasTableData?tableFormatData.userTable.pagination.total : 0">
        </el-pagination>
      </div>
      <div class="wlm-dialog-fixfooter">
        <span slot="footer" class="dialog-footer">
          <el-button size="small" @click="toggle">取 消</el-button>
          <el-button size="small" type="primary" @click="saveChoose">确 定</el-button>
        </span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  // upload2WechatByFileID,
  getMaterialList,
  deleteMaterial
  // syncMaterial
} from '@/api/channel'
import {
  imgtextIndex
} from '@/api/application'
import mixins from '@/mixins/mixins'
import defaultConfig from './utils/config'
import {
  sappCardIndex
} from '@/api/application'
import {
  tooggleArray
} from '@/utils/index'
export default {
  mixins: [defaultConfig.mixins, mixins.getters('Table')],
  props: {
    defaultConfig: {
      type: Object,
      default: function() {
        return defaultConfig
      }
    },
    typeT: {
      default: 'news'
    }
  },
  components: {

  },
  watch: {
    typeT: {
      handler(val) {
        if (val == 'news') {
          this.name = '微信图文'
          this.menuData = [
            {
              group_id: 'perm',
              group_name: '微信图文',
              child: []
            },
            {
              group_id: 'newText',
              group_name: '图文链接',
              child: []
            }
          ]
        } else {
          this.name = '小程序卡片'
          this.menuData = [

            {
              group_id: 'card',
              group_name: '小程序卡片',
              child: []
            }
          ]
        }
      },
      immediate: true

    },
    name(val) {
      if (val == '微信图文') {
        this.handleNodeClick({
          group_id: 'perm',
          group_name: '微信图文',
          child: []
        })
      } else if (val == '图文链接') {
        this.handleNodeClick({
          group_id: 'newText',
          group_name: '图文链接',
          child: []
        })
      } else {
        this.handleNodeClick({
          group_id: 'card',
          group_name: '小程序卡片',
          child: []
        })
      }
    }
    // 'config.initList': {
    //   handler(newData, oldData) {
    //     if (Array.isArray(newData) && newData.length > 0) {
    //       this.$nextTick(() => {
    //         const result = []
    //         newData.map((item) => {
    //           result.push(item)
    //         })

    //         this.uploadConfig.initList = result
    //       })
    //     }
    //   },
    //   immediate: true,
    //   deep: false
    // }
  },
  data() {
    return {
      name: '',
      type: '',
      cardData: [],
      tableDatas: [],
      displayData: [],
      // menuData: [{
      //   group_id: '',
      //   group_name: '全部',
      //   child: []
      // }, {
      //   group_id: 'perm',
      //   group_name: '微信公众号',
      //   child: []
      // }, {
      //   group_id: 'local',
      //   group_name: '本地',
      //   child: []
      // }],
      menuData: [],
      currentRow: [],
      dialogTableVisible: false,
      tableFormatData: {
        current: 'userTable',
        userTable: {
          key: 'userTable',
          api: {
            getList: getMaterialList
          },
          tableData: [{
            attachment: '',
            createtime: 1573800889,
            filename: '',
            id: 2520,
            media_id: '3mrMmpBz0IIYiePZr7YbJC9G3J34bdiYcad7cbdLOmM',
            model: 'perm',
            tag: '',
            type: 'news',
            items: [{
              attach_id: 2520,
              attachment: '',
              author: '1',
              createtime: 1573800889,
              digest: '小象猛犸亲子运动馆 每个小朋友都有一个愿望，每到周末就可以被爸爸妈妈带着一起去儿童乐园玩，在那里不仅可以和',
              displayorder: 0,
              filename: '',
              id: 2520,
              media_id: '3mrMmpBz0IIYiePZr7YbJC9G3J34bdiYcad7cbdLOmM',
              model: 'perm',
              tag: '',
              thumb_media_id: '',
              thumb_url: 'https://qiniu.fjmhwl.com/image/2019/11/2019111817200218de56448.png',
              title: '小程序//小巷猛犸',
              type: 'news',
              url: 'http://mp.weixin.qq.com/s?__biz=MzI2NjQzMzg3OA==&amp;mid=100000445&amp;idx=1&amp;sn=8bc80932a88a78a0115227ef6c9e4b79&amp;chksm=6a8f66845df8ef920f24148d09826210f61a61fa0fe4d0be6489239c1b2df1475cb7e9142' }
            ]
          }],

          files: {
            file_name: '',
            file_type: '',
            type: 'news',
            ids: [],
            checkall: '0',
            model: 'perm'
          },
          pagination: {
            page: 1,
            list_rows: 10,
            pagesizes: [10, 20, 50],
            total: 0
          }
        }
      }
    }
  },
  computed: {

  },
  created() {

  },
  methods: {
    dialogGetData() {
      this.tableFormatData.userTable.api.noCreate = false
      this.getTableList()
    },
    toggle() {
      this.dialogTableVisible = !this.dialogTableVisible
    },
    saveChoose() {
      this.toggle()
      this.output()
    },
    handleNodeClick(data) {
      this.type = data.group_id
      this.name = data.group_name
      if (data.group_name == '微信图文') {
        this.tableFormatData.userTable.files.model = data.group_id
        this.filesSerch()
      } else if (data.group_name == '图文链接') {
        imgtextIndex({ index: 'all' }).then((res) => {
          this.tableDatas = res.data.data
        })
      } else {
        sappCardIndex({ list_rows: 'all' }).then(res => {
          this.cardData = res.data.data
        })
      }
    },
    deleteAll() {
      this.currentRow = []
    },
    chooseFile(ids, item) {
      this.currentRow = tooggleArray(this.currentRow, ids)
      if (this.currentRow.includes(ids)) {
        this.displayData.push(item)
      } else {
        const newIndex = this.displayData.findIndex((displayItem) => {
          return displayItem.goods_id === ids
        })
        this.displayData.splice(newIndex, 1)
      }

      console.log(this.displayData, 'this.displayData=======================')
    },
    delFile(cueeent_id, item) {
      const ids = [...this.currentRow]
      if (ids.length > 0) {
        deleteMaterial({ ids }).then(res => {
          const { data: { msg, code } } = res
          if (code === 1) {
            this.$message.success(msg)
            this.filesSerch()
          } else {
            this.$message.error(msg)
          }
        })
        this.currentRow = []
      }
    },
    clearData() {
      this.currentRow = []
      this.displayData = []
    },
    output() {
      if (Object.prototype.toString.call(this.changeEvt) === '[object Function]') {
        this.changeEvt({ currentRow: this.currentRow, type: this.type, displayData: this.displayData, key: 'ChooseUeditorSource' }, this.updateConfig.bindKey)
      }
      this.clearData()
    },
    handleSelectionChange(selection) {
      this.displayData = selection
      if (this.name == '小程序卡片') {
        this.displayData.forEach(item => {
          console.log('resssssssssssssssss', item)
          item.sapp_card_id = item.id
          // delete item.id
        })
      }
      console.log(this.displayData, 'this.displayData------------------')
    }
  }
}
</script>

<style lang="scss" scoped>
.card {
  width: 200px;
  height: 200px;
  border:1px solid #f3f3f3;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
